import {useContext} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Avatar, IconButton} from '@mui/material';
import {Link as RouterLink} from 'react-router-dom';
import Brightness2Icon from '@mui/icons-material/Brightness2'; // 月亮
import LightModeIcon from '@mui/icons-material/LightMode'; // 太阳
import {ThemeModeContext} from '@theme/ThemeModeContext';
import {useTheme} from '@mui/material/styles';
import {
  Home as HomeIcon,
  Article as ArticleIcon,
  Category as CategoryIcon,
  Info as AboutIcon,
  Mail as ContactIcon
} from '@mui/icons-material';

export default function Header() {
    const {mode, toggleMode} = useContext(ThemeModeContext); // mode: 'light' | 'dark'
    const theme = useTheme();
    const fontColor = theme.palette.text.primary;

    const coloredIcons = {
      home: <HomeIcon color="primary" />,
      articles: <ArticleIcon sx={{ color: '#FF5722' }} />,
      categories: <CategoryIcon sx={{ color: '#4CAF50' }} />,
      about: <AboutIcon sx={{ color: '#2196F3' }} />,
      contact: <ContactIcon sx={{ color: '#9C27B0' }} />
    };

    return (
        <AppBar
            position="fixed"
            sx={{
                bgcolor: theme.palette.background.paper,
                color: theme.palette.text.primary,
                transition: 'background 0.3s, color 0.3s',
                boxShadow: 'none',
                borderBottom: `1px solid ${theme.palette.divider}`,
            }}
            elevation={1}
        >
            <Toolbar>
                {/* 左侧 Logo 和标题 */}
                <Box sx={{display: 'flex', alignItems: 'center', flexGrow: 1}}>
                    <Avatar
                        sx={{mr: 1, bgcolor: 'primary.main', width: 36, height: 36, fontWeight: 'bold'}}
                        alt="JL-Blog"
                    >
                        J
                    </Avatar>
                    <Typography
                        variant="h6"
                        component={RouterLink}
                        to="/"
                        sx={{
                            textDecoration: 'none',
                            color: fontColor,
                            fontWeight: 'bold',
                            letterSpacing: 1,
                        }}
                    >
                        JL-Blog
                    </Typography>
                </Box>
                {/* 右侧菜单 */}
                <Box>
                    <Button
                        component={RouterLink}
                        to="/"
                        startIcon={coloredIcons.home}
                        sx={{fontWeight: 900, mr: 2}}
                    >
                        首页
                    </Button>
                    <Button
                        component={RouterLink}
                        to="/knowledge"
                        startIcon={coloredIcons.articles}
                        sx={{fontWeight: 900, mr: 2}}
                    >
                        知识库
                    </Button>
                    <Button
                        component={RouterLink}
                        to="/dashboard/archive"
                        startIcon={coloredIcons.categories}
                        sx={{fontWeight: 900, mr: 2}}
                    >
                        归档
                    </Button>
                    <Button
                        component={RouterLink}
                        to="/dashboard/contact"
                        startIcon={coloredIcons.contact}
                        sx={{fontWeight: 900, mr: 2}}
                    >
                        关于我
                    </Button>
                    {/* 主题切换按钮 */}
                    <IconButton
                        sx={{ml: 1}}
                        color="inherit"
                        onClick={toggleMode}
                        aria-label="切换主题"
                    >
                        {mode === 'light' ? <Brightness2Icon/> : <LightModeIcon/>}
                    </IconButton>
                </Box>
            </Toolbar>
        </AppBar>
    );
}
